<template>
  <div class="article">
    <breadc-rumb></breadc-rumb>
    <div class="container">
      <el-skeleton :loading="loading" animated>
        <template slot="template">
          <div class="article-container">
            <div class="article-main">
              <div class="article-title" style="text-align: center;">
                <h1><el-skeleton-item variant="h1" style="width:90%" /></h1>
              </div>
              <div class="article-info">
                <span><el-skeleton-item style="width: 120px;" /></span>
                <span><el-skeleton-item style="width: 120px;" /></span>
              </div>
              <div class="editor-content-view">
                <div v-for="(item, index) in 10" :key="index">
                  <el-skeleton-item :style="{ width: (100 - (index * 10)) + '%' }" />
                </div>
              </div>
            </div>
          </div>
        </template>
        <template>
          <div class="article-container">
            <div class="article-main">
              <div class="article-title">
                <h1>{{ article.title }}</h1>
              </div>
              <div class="article-info">
                <span>{{ $t('new.article.articleClass') }}: {{ article.category == 1 ?
                  $t('new.class.companyNews') : $t('new.class.tradeNews') }}</span>
                <span>{{ $t('new.article.articleDate') }}: {{ article.createDate }}</span>
              </div>
              <div class="editor-content-view" v-html="article.content"></div>
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
import BreadcRumb from '@/components/BreadcRumb.vue';
import * as articleApi from '@/api/web/articleApi';
import '@wangeditor/editor/dist/css/style.css';

export default {
  components: { BreadcRumb },
  data () {
    return {
      id: 0,
      article: {
        title: "",
        content: "",
        coverUrl: "",
        createDate: ""
      },
      loading: true
    }
  },
  methods: {
    getArticle () {
      articleApi.getArticle(this.id)
        .then(res => {
          if (res.code == 200) {
            this.article = res.data;
            //置面包屑标题
            // this.$router.currentRoute.meta.bread = this.article.title;
            this.$router.currentRoute.meta.bread = [
              { path: "/News", name: "new.title" },
              {
                path: "/News?category=" + this.article.category, name: this.article.category == 1 ?
                  'new.class.companyNews' : 'new.class.tradeNews'
              },
              { path: "/News/Article?id=" + this.id, name: this.article.title },
            ];
            this.loading = false;
          }
        })
    },
  },
  mounted () {
    if (this.$route.query.id == null) {
      this.$router.back();
    }
    this.id = this.$route.query.id;
    this.getArticle();
  }
}
</script>

<style scoped>
.article-container {
  display: flex;
  padding: 50px 0px;
}

.article-main {
  flex: 1;
}

.article-right {
  width: 20%;
  /* background: red; */
}

.article-title {
  border-bottom: 1px solid #EBEEF5;
  padding: 20px 0px;
}

.article-title h1 {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  color: #303133;
}

.editor-content-view {
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7rem;
}

.editor-content-view>>>h1 {
  font-size: 1.2em;
  margin: 0.67em 0;
}

.editor-content-view>>>img {
  max-width: 100%;
}

.editor-content-view>>>p,
.editor-content-view>>>li {
  white-space: pre-wrap;
  /* 保留空格 */
}

.editor-content-view>>>blockquote {
  border-left: 8px solid #64592a;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view>>>code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view>>>pre>code {
  display: block;
  padding: 10px;
}

.editor-content-view>>>table {
  border-collapse: collapse;
}

.editor-content-view>>>td,
.editor-content-view>>>th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view>>>th {
  background-color: #f1f1f1;
}

.editor-content-view>>>ul,
.editor-content-view>>>ol {
  padding-left: 20px;
}

.editor-content-view>>>input[type="checkbox"] {
  margin-right: 5px;
}

.article-info {
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
  color: #909399;
}

.article-info span+span {
  margin-left: 10px;
}

.container {
  padding-bottom: 25px;
}
</style>